<template>
	<view class="content">
		<image class="left" src="https://img.wilmer.com.cn/admin/2024/6-7/%E7%BC%96%E7%BB%84%402xlogo.png" mode="">
		</image>
		<view class="right">
			<p class="title">登录你的Wilmer账户</p>
			<p class="iconTitle" style="margin-top: 80px;">手机号</p>
			<view class="InputBox">
				<up-input :fontSize="20" placeholder="请输入手机号" border="surround" v-model="phone" type="number"></up-input>
			</view>
			<p class="iconTitle" style="margin-top: 40px;">密码</p>
			<view class="InputBox">
				<up-input :fontSize="20" placeholder="请输入包含字母、数字、符号的密码" border="surround"
					v-model="passwordValue"></up-input>
			</view>
			<!-- <view class="aboutBox">
				<up-checkbox label="记住密码" name="agree" :checked="aloneChecked">
				</up-checkbox>
				<text class="rightText">忘记密码？</text>
			</view> -->
			<view class="btn" hover-class="checkActive" hover-stay-time='20' @click='onContinue()'>继 续</view>
			<p class="register" @click="onBtn()">注册属于你的 Wilmer</p>
		</view>
	</view>
</template>

<script setup>
	import {
		passwordLogin
	} from '@/common/api/login.js'
	import {
		ref
	} from "vue"
	const phone = ref('')
	const passwordValue = ref('')
	const aloneChecked = ref(false)

	function onBtn() {
		uni.navigateTo({
			url: '/pages/index/flow'
		})
	}

	function onContinue() {
		if (phone.value == "") {
			uni.showToast({
				title: "请输入手机号码",
				icon: 'none'
			});
			return false
		} else if (passwordValue.value == '') {
			uni.showToast({
				title: "请输入密码",
				icon: 'none'
			});
			return false
		} else {
			passwordLogin({
				phone: phone.value,
				password: passwordValue.value
			}).then(res => {
				if (res.code == 1) {
					uni.setStorageSync('UserTokenKey', res.data);
					uni.switchTab({
						url: '/pages/index/main',
						success: res => {
							uni.hideTabBar()
						}
					})
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-input {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
	}

	.content {
		display: flex;
		flex-direction: row;
	}

	.content .left {
		width: 903px;
		height: 100vh;
	}

	.content .right {
		width: 825px;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 40px;
			color: #040404;
			line-height: 56px;
			text-align: center;
		}

		.iconTitle {
			width: 527px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 24px;
			color: #787774;
			line-height: 33px;
			text-align: left;
		}

		.InputBox {
			width: 527px;
			height: 68px;
			margin-top: 12px;
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 527px;
			height: 68px;
			background: #2283E2;
			border-radius: 12px;
			margin: 60px auto 0;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 24px;
			color: #FFFFFF;
		}

		.register {
			margin-top: 40px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 24px;
			color: #2283E2;
			line-height: 33px;
			text-align: center;
		}
	}

	.content .right .aboutBox {
		margin-top: 24px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 527px;

		.rightText {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 18px;
			color: #787774;
		}
	}
</style>